<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SSE测试</title>
    <script src="http://cdn.jsdelivr.net/npm/event-source-polyfill@1.0.31/src/eventsource.min.js"></script>
</head>

<body>
    <h2>sse测试</h2>
    <div>
        <p>
            用户名：<input type="text" value="relax" id="username" /><br />
            密码：<input type="text" value="" id="password" /><br />
        </p>
        <p>
            <input type="button" value="获取token" onclick="getToken()" />
            <input type="button" value="使用127环境" onclick="use127()" />
            <input type="button" value="使用正式环境" onclick="useProd()" />
        </p>
        <div id="tokenDiv"></div>
        <p><input type="button" value="测试sse" onclick="sseTest()" /></p>
        <div id="showAlarmInfo"></div>
    </div>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.0.min.js"></script>
    <!-- 引入 EventSource Polyfill -->

    <script>
        var domain = "";
        function use127(){
            domain = "http://192.168.20.127:8078";
            // domain = "http://localhost:8099";
            $('#password').val('123456')
        }

        function useProd(){
            domain = "http://xmhy-admin.fjssj.com:81";
            $('#password').val('hyXm@2015#')
        }


        function getToken() {
            var settings = {
                url: domain + "/login",
                method: "POST",
                timeout: 0,
                headers: {
                    "Content-Type": "application/json"
                },
                data: JSON.stringify({
                    username: $("#username").val(),
                    password: $("#password").val(),
                }),
            };

            $.ajax(settings).done(function (res) {
                console.log(res);
                $("#tokenDiv").text(res.data);
            });
        }

        function displayAlarmNotification(alarm) {
            $('#showAlarmInfo').append("<br>" + JSON.stringify(alarm));
        }

        function sseTest() {
            let token = $("#tokenDiv").text() || "";
            if (!token) {
                alert("请先获取token");
                return;
            }
            // const eventSource = new EventSource(
            //   domain + "/alarmNotice/subscribe?token=" + token
            // );

            const eventSource = new EventSourcePolyfill(
                domain + "/alarmNotice/subscribe", {
                headers: {
                    "token": token
                },
        
                heartbeatTimeout: 60000 // 连接超时时间（毫秒）
            }
            );

            eventSource.onopen = function () {
                console.log("Connected to SSE");
            };

            eventSource.onerror = function (err) {
                console.error("SSE error:", err);
            };

            eventSource.onmessage = function (event) {
                const alarm = JSON.parse(event.data);
                console.log("Received alarm:", alarm);
                // 在页面上展示报警信息
                displayAlarmNotification(alarm);
            };
        }
    </script>
</body>

</html>